<template>
  <div v-loading="loading">
    <div class="banner">
      <div class="avater">
        <img :src="detail.avatar" alt="" v-if="detail.avatar" />
        <svg-icon class="user-icon" name="portrait" v-else></svg-icon>
      </div>
    </div>
    <div class="body-card">
      <div class="title">{{ detail.liveTitle }}</div>
      <div class="content-one">直播讲师：{{ detail.liveUserName }}</div>
      <div class="content-one">
        直播开始时间：
        <span v-if="detail.liveStartDate">{{ detail.liveStartDate + ' ' + detail.liveStartTime }}</span>
      </div>
      <div class="content-one">直播简介：</div>
      <div class="content-two">
        {{ detail.liveDesc }}
      </div>
      <div class="footer" v-if="isPC">
        <button class="buttom">{{ buttomText }}</button>
      </div>
      <div class="footer" v-else>
        <wx-open-launch-weapp
          id="launch-btn"
          username="gh_25e071b83ee0"
          :path="`pages/watch/index?living_code=${liveCode}`"
        >
          <script type="text/wxtag-template">
            <style>.buttom {
              width: 343px;
              height: 50px;
              color: #fff;
              background: #0079de;
              text-align: center;
              border-radius: 50px;
              line-height: 50px;
              font-size: 16px;
            }</style>
            <div class="buttom">{{buttonText}}</div>
          </script>
        </wx-open-launch-weapp>
      </div>
    </div>
  </div>
</template>

<script>
import { getLivingCode } from '@/api/index.js'
import { getWxCode } from '@/utils/index.js'
import { getWxTicket } from '@/api/common'
export default {
  data() {
    return {
      detail: {},
      liveCode: '', //
      query: {
        openid: '',
        livingId: '',
      },
      buttonText: '',
      isPC: true,
      loading: false,
      buttomText: '请在手机端打开',
    }
  },
  created() {},
  mounted() {
    if (
      navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
      )
    ) {
      this.isPC = false
    } else {
      this.isPC = true
    }
    this.query.livingId = this.$route.query.id
    var ua = navigator.userAgent.toLowerCase()
    this.userAgent = navigator.userAgent
    if (ua.match(/micromessenger/i) == 'micromessenger' && ua.match(/wxwork/i) == 'wxwork') {
      //企业微信环境
      this.isPC = true
      this.buttomText = '请在手机微信端打开'
    } else if (ua.match(/micromessenger/i) == 'micromessenger') {
      //微信环境
      getWxCode()
        .then(({ openId, unionId, avatar }) => {
          this.query.openid = openId
          this.interLive()
          let _this = this
          this.loading = true
          getWxTicket(window.location.href.split('#')[0]).then((res) => {
            if (res.code === 200) {
              let { timestamp, nonceStr, signature } = res.data
              wx.ready(function() {
                // config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中
                // alert('成功')
                console.log('成功')
              })
              wx.error(function(res) {
                // config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名
                _this.loading = false
                _this.$toast.clear()
                //错误处理
                _this.$dialog({ message: 'config失败' + JSON.stringify(res) })
                // alert('config失败:' + JSON.stringify(res))
                // if (res.errMsg.indexOf('function not exist') > -1) {
                //   alert('版本过低请升级')
                // }
              })
              wx.config({
                // debug: true,
                appId: sessionStorage.getItem('weAppId'),
                timestamp, // 必填，生成签名的时间戳
                nonceStr, // 必填，生成签名的随机串
                signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
                jsApiList: ['showOptionMenu', 'chooseImage', 'previewImage'], //必填
                openTagList: ['wx-open-launch-weapp'],
              })
            }
          })
        })
        .catch(() => {
          // this.$toast('授权异常，请刷新重试')
        })
    }
  },
  methods: {
    // 进入直播
    interLive() {
      getLivingCode(this.query).then((res) => {
        if (res.code === 200) {
          if (res.data.weLive.replayStatus === 0 && res.data.weLive.openReplay === 1) {
            this.liveCode = res.data.liveCode + '&replay=1'
            this.buttonText = '查看回放'
          } else {
            this.liveCode = res.data.liveCode
            this.buttonText = '进入直播'
          }
          this.detail = res.data.weLive
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.banner {
  width: 100%;
  background-image: url('../../assets/banner.png');
  height: 220px;
  background-size: 100%;
  background-position: center;
  display: flex;
  justify-content: center;
  .avater {
    width: 110px;
    height: 110px;
    margin-top: 40px;
    border-radius: 8px;
    border: 1px solid #ffffff;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
    .user-icon {
      width: 100%;
      height: 100%;
    }
  }
}
.body-card {
  width: 100%;
  background-color: #fff;
  border-radius: 12px 12px 0 0;
  margin-top: -12px;
  padding: 32px 16px 24px 16px;
  .title {
    font-size: 24px;
    font-family: 'PingFang SC-粗体', 'PingFang SC';
    color: #1d2129;
    line-height: 34px;
  }
  .content-one {
    font-size: 16px;
    font-family: 'PingFang SC-中等', 'PingFang SC';
    font-weight: normal;
    color: #1d2129;
    line-height: 32px;
    margin-top: 16px;
  }
  .content-two {
    font-size: 16px;
    font-family: 'PingFang SC-中等', 'PingFang SC';
    font-weight: normal;
    color: #4e5969;
    line-height: 24px;
    margin-top: 8px;
    margin-bottom: 93px;
  }
}
.footer {
  width: 100%;
  display: flex;
  justify-content: center;
  .buttom {
    width: 91.4%;
    max-width: 343px;
    height: 50px;
    background: #0079de;
    border-radius: 50px;
    opacity: 1;
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-family: 'PingFang SC-中等', 'PingFang SC';
    line-height: 50px;
  }
}
</style>
